<template>
  <div id="collectPraise">
    <div class="collectPraise__top">
      <!-- 上部搜索条件 -->
      <topSearch
        :form-inline="formInline"
        :activeList="activeList"
        @toSearch="toSearch"
      ></topSearch>
      <!-- 操作按钮部分 -->
      <div class="box-btn">
        <div class="box-btn__left">
          <el-button
            type="success"
            class="box-btn__left__all"
            size="medium"
            @click="exportFileAll"
            >全部导出</el-button
          >
          <el-button
            type="success"
            class="box-btn__left__export"
            size="medium"
            @click="exportFile"
            >本页导出</el-button
          >
          <!-- 描述列表数据 -->
          <div class="descriptions-box">
            <div class="descriptions-list">
              <span class="descriptions-list__span">此活动参与人数：</span
              ><span>{{ collectionsLikesData.joinPersonsCount || 0 }}人</span>
            </div>
            <div class="descriptions-list">
              <span class="descriptions-list__span">此活动上传作品数：</span
              ><span>{{ collectionsLikesData.workContentCount || 0 }}个</span>
            </div>
            <div class="descriptions-list">
              <span class="descriptions-list__span">此活动集赞数：</span
              ><span>{{ collectionsLikesData.gatherPraiseCount || 0 }}个</span>
            </div>
            <div class="descriptions-list">
              <span class="descriptions-list__span">此活动入量数：</span
              ><span>{{ collectionsLikesData.flowCount || 0 }}个</span>
            </div>
          </div>
        </div>
        <div class="box-btn__right">
          <freshCom
            class="refresh-btn"
            @searchList="searchPraiseList"
          ></freshCom>
        </div>
      </div>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="vest-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activityUrl"
        label="活动地址"
        align="center"
      ></el-table-column>
      <el-table-column
        label="用户名"
        width="110"
        align="center"
        prop="userName"
      />
      <el-table-column
        label="大鹏号"
        width="110"
        align="center"
        prop="dpAccount"
      />
      <el-table-column
        label="手机号"
        width="120"
        align="center"
        prop="mobile"
      />
      <el-table-column
        label="上传作品数"
        align="center"
        prop="contentImages"
        width="110"
        height="60"
      >
        <template slot-scope="scope">
          <listImgShow :imgInfo="scope.row.contentImages"></listImgShow>
        </template>
      </el-table-column>
      <el-table-column
        label="上传作品时间"
        prop="uploadContentImagesDate"
        align="center"
      ></el-table-column>
      <el-table-column align="center" width="130" label="上传集赞图内容">
        <template slot-scope="{ row }">
          <el-button type="warning" @click="toDetail(row)"
            >详情 <i :class="row.icon"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" width="1" type="expand">
        <template slot-scope="{ row }">
          <el-table
            :data="row.info.gatherPraiseHistory"
            style="width: 377px;margin-left: 60px;"
            max-height="250"
          >
            <el-table-column
              prop="date"
              label="集赞图"
              width="180"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-image
                  fit="fit"
                  :src="row.img"
                  style="width:60px;height:60px"
                  :preview-src-list="[row.img]"
                >
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadTime"
              label="上传时间"
              width="180"
              align="center"
            >
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="集赞数"
        align="center"
        prop="collectionsLikesNum"
      />
      <el-table-column label="入量人数" align="center" prop="intakeNum" />
      <el-table-column label="成单人数" align="center" prop="purchaseNum" />
      <el-table-column label="入量详情" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="examineSearchList(scope.row)" type="text"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="审核" width="130" align="center">
        <template slot-scope="scope" class="flex-center">
          <el-button
            :disabled="
              scope.row.auditingState === 'PASS' || !scope.row.collectionsImages
            "
            type="text"
            class="pass-color"
            @click="pass(scope.row)"
            >通过</el-button
          >
          <el-button
            :disabled="
              scope.row.auditingState === 'FAIL' || !scope.row.collectionsImages
            "
            type="text"
            class="fail-color"
            @click="failDown(scope.row)"
            style="margin-left:10px"
            >不通过</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="审核结果" align="center" prop="auditingState">
        <template slot-scope="scope">
          <span
            :class="[
              scope.row.auditingState === 'PASS'
                ? 'pass-color'
                : scope.row.auditingState === 'FAIL'
                ? 'fail-color'
                : 'unrevised-color'
            ]"
            >{{ scope.row.auditingState | filterAuditingState }}</span
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看弹窗 -->
    <examineDialog
      v-if="examineDialogData.isShow"
      :dialog-data="examineDialogData"
    >
    </examineDialog>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchPraiseList"
    ></pageCom>
  </div>
</template>

<script>
import topSearch from './topSearch' // 上部搜索条件
import examineDialog from './examineDialog'
import {
  getCollectPraiseList,
  getCollectLikesdata,
  getActivitiesNameList,
  reviewedPass,
  reviewedFail
} from '@/api/activityCenter/activityManage/collectPraise'
import { exportTab } from '@utils/tableExport' // 导出
const auditingStateList = {
  PASS: '通过',
  FAIL: '未通过',
  UNAUDITED: '未审核'
}
export default {
  name: 'collectPraise',
  components: {
    topSearch,
    examineDialog
  },
  filters: {
    filterAuditingState(value) {
      if (value) {
        return auditingStateList[value]
      } else {
        return '暂无数据'
      }
    }
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        activityId: '', //活动id
        activityName: '', //活动名称
        sort: '', // 集赞数排序  从高到低  从低到高
        dpAccount: '', // 大鹏号
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        timeType: '', //上传时间类型
        useTime: [], // 使用时间
        auditingState: '' //审核状态:
      },
      //单个活动集赞数据详情数据
      collectionsLikesData: {},
      // 表格数据
      tableData: [],
      // 活动名称列表
      activeList: [],
      //集赞数据列表加载控制
      loading: true,
      //集赞数据列表分页条数
      total: 0,
      //集赞数据列表分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      //查看入量弹窗的参数
      examineDialogData: {
        isShow: false, // 默认隐藏
        activityId: '', //活动id
        userId: '' //用户id
      },
      activityId: '', //全局保存活动id
      collectionsLikes: {} //全局保存详情信息
    }
  },
  created() {
    this.loading = false
    exportTab()
  },
  mounted() {
    this.toSearch()
  },
  methods: {
    pass(record) {
      reviewedPass(
        record.id,
        (res) => {
          this.$message({
            type: 'success',
            message: '已操作通过'
          })
          this.toSearch()
        },
        (err) => {
          this.$message({
            type: 'warning',
            message: err.message
          })
        }
      )
    },
    failDown(record) {
      reviewedFail(
        record.id,
        (res) => {
          this.$message({
            type: 'success',
            message: '已操作未通过'
          })
          this.toSearch()
        },
        (err) => {
          this.$message({
            type: 'warning',
            message: err.message
          })
        }
      )
    },
    //集赞列表活动名称下拉
    activitiesNameList() {
      getActivitiesNameList(
        (response) => {
          this.activityId = response[0].id
          this.activeList = response
          this.searchPraiseList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 获取集赞列表 */
    searchPraiseList() {
      this.loading = true
      if (this.formInline.activityId === '') {
        this.formInline.activityId = this.activityId
      } else {
        this.collectionsLikesData = []
      }
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.useTime
      let params = obj
      getCollectPraiseList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          this.tableData.forEach((item) => {
            item.icon = 'el-icon-arrow-down'
          })
          this.searchLikesdata()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          this.loading = false
        }
      )
    },
    //集赞列表-数据统计
    searchLikesdata() {
      if (this.formInline.activityId === '') {
        this.formInline.activityId = this.activityId
      } else {
        this.collectionsLikesData = []
      }
      let activityIdNew = this.formInline.activityId
      getCollectLikesdata(
        activityIdNew,
        (response) => {
          this.collectionsLikesData = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*入量详情弹窗 */
    examineSearchList(item) {
      this.examineDialogData.isShow = true // 显示编辑弹框
      this.examineDialogData.activityId = item.activityId
      this.examineDialogData.userId = item.userId
    },
    /*全部导出 */
    exportFileAll() {
      this.$confirm('确定导出全部参与用户吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = Object.assign({}, this.formInline)
          let url = '/activities/collections-likes/export'
          this.downFile('get', url, params, '全部集赞数据导出')
        })
        .catch(() => {})
    },
    /* 本页导出 */
    exportFile() {
      this.$confirm('确定导出本页参与用户吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = Object.assign({}, this.searchParams, this.formInline)
          let url = '/activities/collections-likes/export/curr'
          this.downFile('get', url, params, '本页集赞数据导出')
        })
        .catch(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.activitiesNameList()
    },
    /* 点击展开行 */
    toDetail(row) {
      let $table = this.$refs.table
      $table.toggleRowExpansion(row)
      row.icon =
        row.icon === 'el-icon-arrow-down'
          ? 'el-icon-arrow-up'
          : 'el-icon-arrow-down'
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.flex-center) {
  display: inline !important;
}
.pass-color {
  color: #02a7f0 !important;
}
.fail-color {
  color: #d9001b !important;
}
.unrevised-color {
  color: #555555 !important;
}
#collectPraise {
  @import url('~@common/style/imgBox.less');
  .showImg {
    cursor: pointer;
  }
}
.collectPraise__top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  .box-btn {
    padding-left: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    width: 100%;
    .box-btn__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      .box-btn__left__all {
        padding: 5px 10px;
      }
      .box-btn__left__export {
        padding: 5px 10px;
        margin-right: 10px;
      }

      .descriptions-box {
        display: flex;
        flex-direction: row;
        font-size: 13px;
        line-height: 23px;
        flex-wrap: wrap;
        width: 100%;
        .descriptions-list {
          display: flex;
          flex-wrap: wrap;
          margin: 0 20px;
          .descriptions-list__span {
            display: block;
            font-size: 15px;
            font-weight: 800;
          }
        }
      }
    }
    .box-btn__right {
      flex-grow: 1;
      .refresh-btn {
        margin-right: 30px !important;
      }
    }
  }
}

.collect-examine {
  .el-dialog {
    .page-box {
      margin: 20px 0;
      text-align: center;
      :deep(.el-pagination.is-background .el-pager li:hover) {
        color: #1dc8a4;
      }

      :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
        line-height: 25px;
        background-color: #1dc8a4;
      }
      :deep(.el-pagination.is-background
          .el-pager
          li:not(.disabled).active:hover) {
        color: #fff !important;
      }
    }
  }
  :deep(.el-dialog) {
    min-height: 74vh;
  }
}
:deep(.el-table__expand-icon) {
  display: none;
}
</style>
